import { View, ScrollView, Image, Text } from "@tarojs/components"
import { Icon, Button } from "@antmjs/vantui"
import { HOST,diffTime } from '../../utils/const'
import './index.scss'

const CusSroll = ({ list = [1, 2, 3, 4, 5,6,7,8], type, scrollWidth = 120,onClick,btnClick }) => {

    function getRandomColor() {
        let color = "#";
        const characters = "0123456789ABCDEF";
        do {
            for (let i = 0; i < 6; i++) {
                color += characters[Math.floor(Math.random() * 16)];
            }
        } while (color === "#FFFFFF"); // 确保颜色不等于白色
        return `${color}99`; // 在颜色后面添加透明度值，0.6的透明度对应十六进制的99
    }

    return (
        <View>
            <ScrollView scrollX scrollWithAnimation className="scroll-view" >
                <View className="list-view" style={{ width: list.length * scrollWidth }}>
                    {list.map((item, index) => {
                        if (type == 'today-down') {
                            return (
                                <View key={index} onClick={(e)=>{
                                    e.stopPropagation()
                                   if(onClick){
                                    onClick(item)
                                   }
                                }} className="cell-view" style={{ backgroundColor: getRandomColor() }}>
                                    <Image className="today-img-view" src={HOST + item?.icon}/>
                                    <View className="today-appname-text">{item?.name}</View>
                                    {item?.downloadCnt>0&&<View className="star-view">
                                        <Text className="today-text">{item?.downloadCnt}</Text>
                                    </View>}
                                </View>
                            )
                        } else if (type == 'high-opinion') {
                            return (
                                <View  key={index} onClick={(e)=>{
                                    e.stopPropagation()
                                    if(onClick){
                                        onClick(item)
                                    }
                                }} className="cell-view" >
                                    <Image className="img" src={HOST + item?.icon} />
                                    <View className="text">{item?.name}</View>
                                    {item?.core&&<View className="star-view">
                                        <Icon name="star" color="#13b858" size={40} />
                                        <Text className="star-text">{item?.core}</Text>
                                    </View>}
                                    <View onClick={(e)=>{
                                        e.stopPropagation()
                                        if(btnClick){
                                            btnClick(item)
                                        }
                                    }} className="down-btn-view ">
                                        <Button size='small' type='primary' className="btn">下载</Button>
                                    </View>
                                </View>
                            )
                        } else if (type == 'new-app') {
                            return (
                                <View  key={index} onClick={(e)=>{
                                    e.stopPropagation()
                                    if(onClick){
                                        onClick(item)
                                    }
                                }} className="new-app-view"  >
                                    <View className="top-info-bg">
                                        <Image className="img" src={HOST + item?.icon} />
                                        <View className="top-right-view">
                                            <View className="app-name">
                                                {item?.name}
                                            </View>
                                            <View className="app-size">
                                                {item?.size}
                                            </View>
                                        </View>
                                    </View>
                                    <View className="bottom-bg-view">
                                        <View className="left-bg-view">
                                            <Image className="img" src={HOST + item?.icon} />
                                            <View className="left-name">{'博主上传'}</View>
                                            <View className="left-name">{item?.create_time ? diffTime(new Date(item?.create_time).getTime()) : '未知'}</View>
                                        </View>
                                        <View className="right-bg-view">
                                         <Button onClick={(e)=>{
                                            e.stopPropagation()
                                            if(btnClick){
                                                btnClick(item)
                                            }
                                         }} size='small' type='primary' className="btn">下载</Button>
                                        </View>
                                    </View>
                                </View>
                            )
                        } else if (type == 'search-app') {
                            return (
                                <View  key={index} onClick={(e)=>{
                                    e.stopPropagation()
                                    if(onClick){
                                        onClick(item)
                                    }
                                }} className="search-view">
                                    <Image className="today-img-view" src={HOST + item?.icon}/>
                                    <Text className="search-appname-text">{'今日头条'}</Text>
                                </View>
                            )
                        }else if (type == 'detail') {
                            return (
                                <View  key={index} onClick={(e)=>{
                                    e.stopPropagation()
                                    if(onClick){
                                        onClick(item)
                                    }
                                }} className="app-detail-view" style={{width:scrollWidth}}>
                                    <Image className="today-img-view" style={{width:scrollWidth-20}} src={HOST + item}/>
                                </View>
                            )
                        }
                    })}
                </View>
            </ScrollView>
        </View>
    )
}

export default CusSroll